<!--  -->
<template>
  <div class="container">
    <el-container>
      <el-header class="share-header">
        <div>
          <img src="@/assets/logo.png" alt="" />
          <span>集结号</span>
        </div>
      </el-header>
      <el-main class="share-main">
        <div class="share-content">
          <div class="share-content-head">
            <el-avatar :size="50" :src="useUserStore().getUserInfo().avatar" />
            <span
              style="
                font-size: medium;
                margin-left: 20px;
                color: rgb(42, 83, 165);
              "
            >
              分享人： {{ useUserStore().getUserInfo().userName }}
            </span>

            <div style="margin-left: 120px">
              <!-- <div>分享文件</div> -->
              <div>有效期：{{ expireTime }}</div>
            </div>
          </div>
          <div class="tip" style="box-sizing: border-box">全部文件</div>
          <div class="share-content-main">
            <el-table
              ref="multipleTableRef"
              :data="tableData"
              style="width: 100%"
              height="78vh"
            >
              <!-- 多选框 -->
              <!-- <el-table-column type="selection" width="55" /> -->
              <!-- 文件名 -->
              <el-table-column property="fileName" label="文件名">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <!-- <img src="@/assets/music.webp" style="height: 20px;"
                  v-if="scope.row.folderType === 0 && scope.row.fileType === '音频'">
                  <img src="@/assets/text.webp" style="height: 20px;"
                  v-if="scope.row.folderType === 1 && scope.row.fileType === '文档'"> -->
                    <!-- <img style="width: 30px;" :src=scope.row.fileCover alt="缩略图" @click="showP"> -->
                    <!-- 预览图片 -->
                    <div class="demo-image__preview">
                      <el-image
                        style="width: 30px"
                        preview-teleported
                        :src="scope.row.fileCover"
                      />
                    </div>
                    <!-- 文件名 -->
                    <span
                      class="fileNameC textName"
                      :title="scope.row.fileName"
                      style="margin-left: 10px"
                    >
                      {{ scope.row.fileName }}
                    </span>
                  </div>
                </template>
              </el-table-column>
              <!--日期  -->
              <el-table-column label="创建分享时间">
                <template #default="scope">
                  {{ scope.row.createTime }}
                </template>
              </el-table-column>
              <!--  文件大小-->
              <el-table-column property="fileSize" label="文件大小">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">
                      {{
                        scope.row.fileSize < 1024
                          ? Math.floor(scope.row.fileSize) + 'KB' === '0KB'
                            ? '未知'
                            : Math.floor(scope.row.fileSize) + 'KB'
                          : Math.floor(scope.row.fileSize / 1025) + 'MB'
                      }}</span
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column property="fileType" label="文件类型">
                <template #default="scope">
                  <span v-if="scope.row.folderType === 1">文件夹</span>
                  <span v-else-if="scope.row.fileType === 1">视频</span>
                  <span v-else-if="scope.row.fileType === 2">音频</span>
                  <span v-else-if="scope.row.fileType === 3">图片</span>
                  <span v-else-if="scope.row.fileType === 4">pdf</span>
                  <span v-else-if="scope.row.fileType === 5">文档</span>
                  <span v-else-if="scope.row.fileType === 6">表格</span>
                  <span v-else-if="scope.row.fileType === 7">文本</span>
                  <span v-else-if="scope.row.fileType === 8">代码文件</span>
                  <span v-else-if="scope.row.fileType === 9">压缩文件</span>
                  <span v-else>未知</span>
                </template>
              </el-table-column>
              <el-table-column width="120">
                <template #default="scope">
                  <el-button
                    type="success"
                    round
                    @click="downloadFilled(scope.row)"
                    >下载</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores'
import { ref } from 'vue'

const tableData = ref()
tableData.value = [JSON.parse(localStorage.getItem('shareCode')).fileInfo]
const expireTime = ref(JSON.parse(localStorage.getItem('shareCode')).expireTime)
const downloadFilled = (row) => {
  //创建a标签将地址赋值给a标签的href属性，实现下载
  const a = document.createElement('a')
  a.href = `http://121.37.211.41:10010/down/downLoadFileByFileId?fileId=${row.fileId}`
  a.click()
  // downloadFileByFileId(fileId).then((res) => {
  //   console.log(res)
  // })
}
</script>

<style scoped>
.tip {
  font-size: small;
  margin: 5px 0;
  font-weight: bold;
}

.share-content-head {
  display: flex;
  align-items: center;
  padding: 20px 10px;
  height: 60px;
  width: 100%;
  border-bottom: 1px solid silver;
  box-sizing: border-box;
}

.share-content {
  /* width: 700px; */
  width: 80%;
}

.share-main {
  display: flex;
  justify-content: center;
  height: calc(100vh - 50px);
}

.share-header {
  display: flex;
  justify-content: center;
  color: white;

  font-weight: bolder;
  font-size: 40px;
  height: 50px;
  background-color: rgb(67, 147, 240);
}

.share-header div {
  display: flex;
  height: 50px;
  width: 700px;
  align-items: center;
}

.share-header img {
  width: 45px;
  background-color: aliceblue;
  border-radius: 50%;
  margin-right: 10px;
}
</style>
